﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
h1,h3{
        text-align: center;
}
</style>

<script>
 $(document).ready(function() {
       $('#myForm').ajaxForm(function() {
            alert("정보 추가를 완료 하였습니다.");
            $('#myForm').each(function(){
                this.reset();
            });
            history.back();
       });
       
       $('#nc_update2').ajaxForm(function() {
           alert("정보 수정 완료 하였습니다.");
           $('#nc_update2').each(function(){
               this.reset();
           });
           history.back();
      });
       
 });

 function nc_delete(){
	 var str = $('input:radio[name="chk"]:checked').val();
	 var xmlhttp;    
	 if (str==""){
		 return;  
	 }
	 if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
		 xmlhttp=new XMLHttpRequest();
	 }else{// code for IE6, IE5   
		 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
	 } 
	 xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	    {
	    history.back();
	    }
	  }


	 xmlhttp.open("post", "delete_namecard.jsp");
	 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	 xmlhttp.send("chk="+str+"");
 }
 
 
 function nc_update(no){

	 var xmlhttp;    
	 var name=$('#u_name').val();
	 var address=$('#u_address').val();
	 var telephone=$('#u_telephone').val();
	 var age=$('#u_age').val();
	 var gender=$('#u_gender').val();
	 
	 if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
		 xmlhttp=new XMLHttpRequest();
	 }else{// code for IE6, IE5   
		 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
	 } 
	 xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	    {
	    history.back();
	    }
	  }


	 xmlhttp.open("post", "update_namecard.jsp");
	 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	 xmlhttp.send("name="+name+"&address="+address+"&telephone="+telephone+"&age="+age+"&gender="+gender+"&no="+no+"");
 }
 
 
	function list(){
		
		$.getJSON("select_namecard.jsp",function(data){	
			var nc_list = "<table data-role='table' class='ui-responsive'>";
			nc_list+="<thead>";
			nc_list+="<tr>";
			nc_list+="<th>이름</th>";
			nc_list+="<th>주소</th>";
			nc_list+="<th>연락처</th>";
			nc_list+="<th>나이</th>";
			nc_list+="<th>성별</th>";
			nc_list+="</tr></thead>";
			nc_list+="<tbody>"; 
			for(var i =0; i<data.length;i++){
				nc_list +="<tr>";
				nc_list +="<td>"+data[i].name+"</td>";
				nc_list +="<td>"+data[i].address+"</td>";
				nc_list +="<td>"+data[i].telephone+"</td>";
				nc_list +="<td>"+data[i].age+"</td>";
				nc_list +="<td>"+data[i].gender+"</td>";
				nc_list +="</tr>";
			}
			nc_list+="</tbody>";
			nc_list+="</table>";
			
			document.getElementById("namecard_list").innerHTML=nc_list;
		});
	}
	
 function del_list(){
		
		$.getJSON("select_namecard.jsp",function(data){	
			
			var nc_list = "<table data-role='table' class='ui-responsive'>";
			nc_list+="<thead>";
			nc_list+="<tr>";
			nc_list+="<th>선택</th>";
			nc_list+="<th>이름</th>";
			nc_list+="<th>주소</th>";
			nc_list+="<th>연락처</th>";
			nc_list+="<th>나이</th>";
			nc_list+="<th>성별</th>";
			nc_list+="</tr></thead>";
			nc_list+="<tbody>"; 
			for(var i =0; i<data.length;i++){
				nc_list +="<tr>";
				nc_list +="<td><input type='radio' id='chk' name='chk' value="+data[i].id+"></td>"
				nc_list +="<td>"+data[i].name+"</td>";
				nc_list +="<td>"+data[i].address+"</td>";
				nc_list +="<td>"+data[i].telephone+"</td>";
				nc_list +="<td>"+data[i].age+"</td>";
				nc_list +="<td>"+data[i].gender+"</td>";
				nc_list +="</tr>";
			}
		 	nc_list +="<tr>";
			nc_list +="<td colspan='6' align='center'>";
			nc_list +="<input type='button' onclick='nc_delete();'value='삭제'></td>";
			nc_list +="</tr>"; 
			nc_list+="</tbody>";
			nc_list+="</table>";
			document.getElementById("namecard_del").innerHTML=nc_list;
		});
	} 

 function up_list(){
		
		$.getJSON("select_namecard.jsp",function(data){	
			
			var nc_list = "<table data-role='table' class='ui-responsive'>";
			nc_list+="<thead>";
			nc_list+="<tr>";
			nc_list+="<th>이름</th>";
			nc_list+="<th>주소</th>";
			nc_list+="<th>연락처</th>";
			nc_list+="<th>나이</th>";
			nc_list+="<th>성별</th>";
			nc_list+="<th>수정</th>";
			nc_list+="</tr></thead>";
			nc_list+="<tbody>"; 
			for(var i =0; i<data.length;i++){
				nc_list +="<tr>";
				nc_list +="<td>"+data[i].name+"</td>";
				nc_list +="<td>"+data[i].address+"</td>";
				nc_list +="<td>"+data[i].telephone+"</td>";
				nc_list +="<td>"+data[i].age+"</td>";
				nc_list +="<td>"+data[i].gender+"</td>";
				nc_list +="<td><input type='button' onclick='update_form("+data[i].id+");'value='수정'></td></td>";
				nc_list +="</tr>";
			}	
				
			nc_list+="</tbody>";
			nc_list+="</table>";
			document.getElementById("namecard_up").innerHTML=nc_list;
		});
	}
 
 function update_form(id){
		
		$.getJSON("update_form.jsp?no="+id,function(data){	
			var updateForm = "";
			updateForm+="<div class='ui-field-contain'>";
			updateForm+="<label for='name'>이름:</label>";
			updateForm+="<input type='text' name='u_name' id='u_name'  value='"+data[0].name+"'><br/>";
			updateForm+="<label for='address'>주소:</label>";
			updateForm+="<input type='text' name='u_address' id='u_address'  value='"+data[0].address+"'><br/>";
			updateForm+="<label for='telephone'>연락처:</label>";
			updateForm+="<input type='text' name='u_telephone' id='u_telephone'  value='"+data[0].telephone+"'><br/>";
			updateForm+="<label for='age'>나이:</label>";
			updateForm+="<input type='text' name='u_age' id='u_age'  value='"+data[0].age+"'><br/>";
			updateForm+="<label for='gender'>성별:</label>";
			updateForm+="<select name='u_gender' id='u_gender'>";
			updateForm+="<option value='남자'>남자</option>";
			updateForm+="<option value='여자'>여자</option>";
			updateForm+="</select><br/>";
			updateForm+="</div>";
			updateForm+="<input type='button' onclick='nc_update("+data[0].id+");'value='수정'>";
			
			document.getElementById("namecard_up").innerHTML=updateForm;
		});
	}

</script>

</head>
<body>

<div data-role="page">
  <div data-role="header">
        <h1>MENU</h1>
  </div>

  <div data-role="main" id="main" class="ui-content">
        <a href="#insert_page" class="ui-btn">정보 추가</a>
        <a href="#select_page" onclick="list();" class="ui-btn">정보 리스트</a>
        <a href="#update_page" onclick="up_list();" class="ui-btn">정보 수정</a>
        <a href="#delete_page" onclick="del_list();" class="ui-btn">정보 삭제</a>
  </div>

  <div data-role="footer">
        <h1>NAMECARD MAIN</h1>
  </div>
</div>


<div data-role="page" data-dialog="true" id="insert_page">
  <div data-role="header">
    <h1>정보추가</h1>
  </div>

  <div data-role="main" class="ui-content">
     <form id="myForm"  method="post" action="insert_namecard.jsp">
      <div class="ui-field-contain">
        <label for="name">이름:</label>
        <input type="text" name="name" id="name">
        <label for="address">주소:</label>
        <input type="text" name="address" id="address">
        <label for="telephone">연락처:</label>
        <input type="text" name="telephone" id="telephone">
        <label for="age">나이:</label>
        <input type="text" name="age" id="age" value="">
        <label for="gender">성별:</label>
        <select name="gender" id="gender">
          <option value="남자">남자</option>
          <option value="여자">여자</option>
        </select>
      </div>
      <input type="submit" data-inline="true" value="저장">
    </form>
  </div>

  <div data-role="footer">
    <h1>Footer Text In Dialog</h1>
  </div>
</div>



<div data-role="page" id="select_page" data-dialog="true" onload="list();">
  <div data-role="header">
    <h1>정보 리스트</h1>
  </div>

  <div data-role="main" class="ui-content">
     <div id="namecard_list"></div>
  </div>

  <div data-role="footer">
    <h1>Footer Text In Dialog</h1>
  </div>
</div>

<div data-role="page" id="update_page" data-dialog="true" onload="up_list();">
  <div data-role="header">
    <h1>정보 수정</h1>
  </div>

  <div data-role="main" class="ui-content">
     <div id="namecard_up"></div>
  </div>

  <div data-role="footer">
    <h1>Footer Text In Dialog</h1>
  </div>
</div>


<div data-role="page" id="delete_page" data-dialog="true" onload="del_list();">
  <div data-role="header">
    <h1>정보 삭제</h1>
  </div>

  <div data-role="main" class="ui-content">
     <div id="namecard_del"></div>
  </div>

  <div data-role="footer">
    <h1>Footer Text In Dialog</h1>
  </div>
</div>



	<div data-role="page" id="update_page2" data-dialog="true"
		onload="up_list();">
		<div data-role="header">
			<h1>정보 수정</h1>
		</div>

		<div data-role="main" class="ui-content">
			<div id="namecard_up2"></div>
		</div>

		<div data-role="footer">
			<h1>Footer Text In Dialog</h1>
		</div>
	</div>
</body>
</html>
